import React from "react";
import { useUser } from "utils/user";
import { useDebounce } from "hooks/useDebounce";
import { useDocumentTitle } from "hooks/useDocumentTitle";
import {
  ScreenContainer,
  Row,
  ButtonNoPadding,
  ErrorBox,
} from "components/lib";
import { List } from "./list";
import { SearchPanel } from "./search-panel";
import { useProjectModal, useProjectSearchParams, useProjects } from "./util";
// import { useDispatch } from "react-redux";
// import { projectListActions } from "./slice";

export const ProjectList = () => {
  useDocumentTitle("项目列表", false);

  const [param, setParam] = useProjectSearchParams();
  const { isLoading, error, data: list } = useProjects(useDebounce(param, 200));
  const { data: users } = useUser();
  // const dispatch = useDispatch();
  const { open } = useProjectModal();

  return (
    <ScreenContainer>
      <Row between={true}>
        <h1>项目列表</h1>
        <ButtonNoPadding
          type={"link"}
          // onClick={() => dispatch(projectListActions.openModal())}
          onClick={open}
        >
          创建项目
        </ButtonNoPadding>
      </Row>
      <SearchPanel param={param} users={users || []} setParam={setParam} />
      <ErrorBox error={error} />
      <List users={users || []} loading={isLoading} dataSource={list || []} />
    </ScreenContainer>
  );
};
